<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">订单详情</h1>
                <div>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">基本信息</span>
                        </div>
                        <el-form :inline="true" ref="form2" :model="form2" label-width="80px">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="订单号 :">
                                        {{orderInfo.orderCode}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="客户 :">
                                        {{orderInfo.customerNick}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="状态 :">
                                        {{orderStatus}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="商家 :">
                                        {{orderInfo.orgName}}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="下单时间 :">
                                        {{orderInfo.createTime}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="付款时间 :">
                                        {{orderInfo.payTime}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="总金额 :">
                                        {{orderInfo.amount}}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-card>
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">商品信息</span>
                        </div>
                        <template>
                            <el-tabs v-model="activeName2" type="card">
                                <el-tab-pane label="订单详情" name="first">
                                    <el-card class="box-card" style="margin-top: 10px">
                                        <el-table
                                                :data="itemList"
                                                border
                                                style="width: 100%">
                                            <el-table-column
                                                    type="index"
                                                    label="行号"
                                                    width="80">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="itemName"
                                                    label="商品">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="itemPrice"
                                                    label="单价（元）">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="count"
                                                    label="数量">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="amount"
                                                    label="总金额（元）">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="status"
                                                    label="订单状态"
                                                    :formatter="formatterStatus">
                                            </el-table-column>
                                            <el-table-column v-if="orderInfo.status === 2"
                                                    align="center"
                                                    label="操作"
                                                    inline-template>
                                                <div style="margin-left: -10px">
                                                    <el-dropdown>
                                                        <el-button size="small" type="primary">
                                                            操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                        </el-button>
                                                        <el-dropdown-menu slot="dropdown" align="center">
                                                            <el-dropdown-item><el-button size="mini" type="primary" class="el-icon-edit" @click.native="shipItem">发货</el-button></el-dropdown-item>
                                                        </el-dropdown-menu>
                                                    </el-dropdown>
                                                </div>
                                            </el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-tab-pane>
                                <el-tab-pane label="发货详情" name="third">
                                    <template v-if="shipLogisticsDetail.length > 0">
                                        <el-form :inline="true" label-width="80px">
                                            <el-row>
                                                <el-col :span="6">
                                                    <el-form-item label="订单号 :">
                                                        {{shipLogisticsDetail[0].orderCode}}
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="6">
                                                    <el-form-item label="发货时间 :">
                                                        {{shipLogisticsDetail[0].insertTime}}
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="6">
                                                    <el-form-item label="快递商家 :">
                                                        {{shipLogisticsDetail[0].logisticsCompany}}
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="6">
                                                    <el-form-item label="快递单号 :">
                                                        {{shipLogisticsDetail[0].logisticsTrackingNo}}
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                        <div style="padding-left: 100px">
                                            <template v-for="log in shipTraceList[0]">
                                                <span>{{log.AcceptTime}}&nbsp;&nbsp;&nbsp;{{log.AcceptStation}}</span><br>
                                            </template>
                                        </div>
                                    </template>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </el-card>
                </div>
            </div>
            <el-dialog title="填写订单物流" v-model="shipItemDialogFormVisible">
                <el-form :model="shipItemForm" label-width="80px">
                    <el-form-item label="物流公司">
                        <el-select placeholder="请选择物流公司" filterable v-model="shipItemForm.logisticsCompanyCode" @change="onShipCompanyChange">
                            <template v-for="item in shipCompanyList">
                                <el-option :label="item.name" :value="item.value"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物流单号">
                        <el-input v-model="shipItemForm.logisticsTrackingNo" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="shipItemForm.memo"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :disabled="shipItemBtnEnable" type="primary" @click="saveShip">保存</el-button>
                        <el-button :disabled="shipItemBtnEnable" @click="cancelShip">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted () {
            this.parseShipTrace()
            this.getShipCompanyList()
        },
        data: function(){
            return {
                shipCompanyList: [],
                orderInfo: ${(detail)!''},
                shipLogisticsDetail: ${(shipLogisticsDetail)!''},
                shipTraceList: [],
                user: ${(user)!'null'},
                shipItemForm: {
                    orderId: '',
                    logisticsCompanyCode: '',
                    logisticsCompany: '',
                    logisticsTrackingNo: '',
                    memo: ''
                },
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                form:{},
                form2: {},
                shipItemDialogFormVisible: false,
                shipItemBtnEnable: false,
                activeName2: 'first',
                itemList: ${(itemList)!'[]'},
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu
            }
        },
        computed: {
            orderStatus () {
                if (this.orderInfo.status === -1) {
                    return '取消'
                } else if (this.orderInfo.status === 1) {
                    return '待付款'
                } else if (this.orderInfo.status === 2) {
                    return '待发货'
                } else if (this.orderInfo.status === 3) {
                    return '待收货'
                } else if (this.orderInfo.status === 4) {
                    return '已确认'
                }
            }
        },
        methods: {
            onShipCompanyChange (value) {
                let that = this
                this.shipCompanyList.forEach(function (item) {
                    if (item.value === value) {
                        that.shipItemForm.logisticsCompany = item.name
                    }
                })
            },
            parseShipTrace () {
                let that = this
                this.shipTraceList = []
                this.shipLogisticsDetail.forEach(function (item) {
                    if (item.traces !== null && item.traces !== '' && item.traces !== undefined) {
                        let obj = JSON.parse(item.traces)
                        that.shipTraceList.push(obj)
                    }
                })
            },
            getData () {
                let that = this
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                this.$get('/order/item/orderItemInfo?orderId=' + this.orderInfo.id, null, function (res) {
                    if(res.status === 200){
                        that.orderInfo = res.data.detail;
                        that.shipLogisticsDetail = res.data.shipLogisticsDetail;
                        that.itemList = res.data.itemList;
                        that.parseShipTrace()
                        loading.close();
                    }else{
                        loading.close();
                        that.$alert(res.errMsg,'提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getShipCompanyList () {
                let that = this
                this.$get('/dictionary/list/LOGISTICS', null, function (res) {
                    if(res.status === 100){
                        that.shipCompanyList = res.returnValue;
                    }else{
                        that.$alert(res.errMsg,'提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            saveShip () {
                let that = this
                this.shipItemBtnEnable = true
                this.shipItemForm.orderId = this.orderInfo.id
                this.http('/order/logistics/add', this.shipItemForm, function (res) {
                    if(res.status === 200){
                        that.shipItemBtnEnable = false
                        that.shipItemDialogFormVisible = false
                        that.getData()
                    }else{
                        that.shipItemBtnEnable = false
                        that.$alert(res.errMsg,'提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.shipItemBtnEnable = false
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            cancelShip () {
               this.shipItemDialogFormVisible = false
               this.shipItemBtnEnable = false
               this.shipItemForm.logisticsCompany = ''
               this.shipItemForm.logisticsTrackingNo = ''
               this.shipItemForm.memo = ''
            },
            formatterStatus(row){
                if (row.status === 1) {
                    return '待付款'
                } else if (row.status === 2) {
                    return '已付款'
                } else if (row.status === 3) {
                    return '已申请退款'
                } else if (row.status === 4) {
                    return '拒绝退款'
                } else if (row.status === 5) {
                    return '已退款'
                }
            },
            shipItem () {
                this.shipItemDialogFormVisible = true
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>